﻿

@{
    Layout = "~/Views/Shared/_LayoutDialog.cshtml";
}
@model OL.FrameCore.Application.User.Dto.GetUserRoleResponse
@section CSS{
    <style>
        #divRoleTree {
            margin-left: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .layui-tree-entry {
            margin-bottom: 4px !important;
        }
    </style>
}

<form class="layui-form">
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <input type="hidden" id="hidId" value="@Model.Id" />
            <div class="layui-row">
                <div class="layui-form-item">
                    <fieldset class="layui-elem-field" style="height:350px;overflow-y:auto;">
                        @*<legend></legend>*@
                        <div class="layui-field-box">
                            <div id="divRoleTree"></div>
                        </div>
                    </fieldset>
                </div>
            </div>
            <div class="layui-row  detail-submit">
                <div class="layui-layer-btn layui-layer-btn-c">
                    <a class="layui-layer-btn0" id="btnSave" lay-submit lay-filter="*">保存</a>
                    <a class="layui-layer-btn0" id="btnCanel" onclick="UserRole.cancel()">取消</a>
                </div>
            </div>
        </div>
    </div>
</form>

@section Scripts{
    <script>
        var UserRole = function () {
            let inited = false;
            let data = {};

            function initData() {
                layui.use(['form', 'layer', 'tree', 'element'], function () {
                    var form = layui.form;

                    form.on('submit(*)', function (data) {
                        var id = $("#hidId").val();
                        var checkData = layui.tree.getChecked('treeRole');
                        var assignRoles =getChildNodes(checkData,[]);

                        //开启loading
                        layer = layui.layer;
                        var index = layer.load(2);

                        $.ajax({
                            url: "/User/PostAssignUserRole",
                            type: "post",
                            data: { id: id, assignRoles: assignRoles },
                            success: function (data) {
                                layer.close(index)
                                if (data.state == 1) {
                                    parent.layer.msg("提交成功", { shade: 0.1, icon: 1 }, function () {
                                        //刷新列表
                                        parent.layui.table.reload("table-list")
                                        var index = parent.layer.getFrameIndex(window.name);
                                        parent.layer.close(index);
                                    });
                                } else if (data.state == 0) {
                                    parent.layer.open({
                                        title: '提示'
                                        , content: "提交失败 " + data.msg
                                        , shade: 0.4
                                        , icon: 5
                                    });
                                } else {
                                    parent.layer.open({
                                        title: '提示'
                                        , content: "提交异常 " + data.msg
                                        , shade: 0.4
                                        , icon: 2
                                    });
                                }
                            }
                        });

                    });

                    //模块列表
                    var userRoles =@Html.Raw(Model.UserRolesJsonText);
                    //转成模块树
                    var treeData = formateList(userRoles, 'ParentId',0,'Id');
                    //基本演示
                    layui.tree.render({
                        elem: '#divRoleTree'
                        , data: treeData
                        , showCheckbox: true  //是否显示复选框
                        , id: 'treeRole'
                        , isJump: true //是否允许点击节点时弹出新窗口跳转
                        , click: function (obj) {
                        }
                        , showLine: false
                        //, onlyIconControl: true
                    });
                });
            }

            //列表转成树
            function formateList(list, parent_key, init_value = undefined, master_key = 'id') {
                let data = { formate: [], remainder: [] }
                list.forEach(item => data[item[parent_key] === init_value ? 'formate' : 'remainder'].push(item))
                return data.formate.map(item => ({
                    //...item,
                    id: item['Id'],
                    title: item['RoleName'],
                    field: '',
                    spread: true,
                    checked: item['IsAssign'],
                    disabled: false,
                    children: formateList(data.remainder, parent_key, item[master_key])
                }))
            }
            //获取id列表
            function getChildNodes(treeNode, result) {
                for (var i in treeNode) {
                    result.push(treeNode[i].id);
                    result = getChildNodes(treeNode[i].children, result);
                }
                return result;
            }

            return {
                init() {//初始化
                    if (!inited) {
                        initData();
                        inited = true;
                    }
                },
                cancel() {
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                }
            }
        }();
        UserRole.init();
    </script>
}